import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  // vuex持久化
  plugins: [createPersistedState({
    storage: window.sessionStorage // 默认存储在localStorage里面

    // 未使用modules之前
    // reducer: (state) => {
    //   return {
    //     // 需要进行持久化的数据
    //     cityId: state.cityId,
    //     cityName: state.cityName
    //   }
    // }
  })],
  state: {
    isManageSystem: false,  // 是否是后台管理系统
    loginDialogFormVisible: false, // 登录弹框显示隐藏
    registerDialogFormVisible: false, // 注册弹框显示隐藏
    forgetPasswordDialogFormVisible: false, // 忘记密码弹框显示隐藏
    isCollapse: false,
    avatar: ''
  },
  mutations: {
    // 前后台切换
    changeManageSystem(state, isChange) {
      state.isManageSystem = isChange;
    },
    showLoginDialog(state) {
      state.loginDialogFormVisible = true;
    },
    hideLoginDialog(state) {
      state.loginDialogFormVisible = false;
    },
    showRegisterDialog(state) {
      state.registerDialogFormVisible = true;
    },
    hideRegisterDialog(state) {
      state.registerDialogFormVisible = false;
    },
    showForgetPasswordDialog(state) {
      state.forgetPasswordDialogFormVisible = true;
    },
    hideForgetPasswordDialog(state) {
      state.forgetPasswordDialogFormVisible = false;
    },
    // 点击按钮，切换菜单的折叠与展开
    toggleCollapseVuex(state) {
      state.isCollapse = !state.isCollapse;
    },
    // 修改avatar
    changeAvatar(state, imgUrl) {
      state.avatar = imgUrl
    }
  },
  actions: {
  },
  modules: {
  }
})
